import { useQuery } from "@tanstack/react-query";
import styled from "styled-components";
import { Table } from "antd";
import { kafkaBrokerList } from "@/api/sharing/kafka";

const BrokerValue = ({ currentSource, onTransferLeftPanel }) => {
  const columns = [
    {
      title: 'ID',
      dataIndex: 'id',
    },
    {
      title: 'Host',
      dataIndex: 'host',
    },
    {
      title: 'Port',
      dataIndex: 'port',
    },
    {
      title: 'Partitions as Leader',
      dataIndex: 'leaderPartitions',
      render: (text, record) => {
        return record.leaderPartitions?.length || 0
      }
    },
    {
      title: 'Partitions as Follower',
      dataIndex: 'followerPartitions',
      render: (text, record) => {
        return record.followerPartitions?.length || 0
      }
    },
  ]
  const { data: brokerData } = useQuery({
    queryKey: ['KafkaRightPanel', currentSource?.connectInfo?.id],
    queryFn: () => {
      return kafkaBrokerList(currentSource?.connectInfo?.id).then(res => {
        return res.result || []
      })
    }
  })
  return (<StyledWrap>
    <Table
      rowKey={(record) => record.id}
      dataSource={brokerData || []}
      columns={columns}
      bordered
      pagination={false}
      rowClassName={(record) => {
        return (record.host + ':' + record.port) === currentSource?.key ? 'current-broker' : ''
      }}
    />
  </StyledWrap>);
}

const StyledWrap = styled.div`
  .current-broker {
    .ant-table-cell{
      background-color: #0e3d71 !important;
    }
  }
`

export default BrokerValue;